<template>
  <div>
    <button @click="handle">切换</button>
  </div>
  <!-- 测试 beforeUpdate updated  -->
  <A v-move:a.mysyn="{ background: 'red', flag: flag }"></A>

  <!--  测试beforeUnmount unmounted-->
  <A v-if="flag" v-move:a.mysyn="{ background: 'red', flag: flag }"></A>

  <hr />
  <input type="text" v-model="color" />
  <A v-color="{ background: color }"></A>
  <hr />
  <B></B>
</template>

<script lang="ts" setup>
// 自定义指令生命周期钩子函数
// created 元素初始化的时候
// beforeMount 指令绑定到元素后调用 只调用一次
// mounted 元素插入父级dom调用
// beforeUpdate 元素被更新之前调用,虚拟dom更新之前调用
// updated 虚拟dom更新之后
// beforeUnmount 在元素被移除前调用
// unmounted 指令被移除后调用 只调用一次
import A from "./directiveA.vue";
import B from "./directiveB.vue";

import { ref, Directive, DirectiveBinding } from "vue";
// 声明一个局部的自定义指令 命名必须以vNameOfDirective 的形式使得可以直接在模板中使用
type Dir = {
  background: string;
};
const vMove: Directive = {
  //  所有参数可以解构查看
  created(...args: Array<any>) {
    console.log("args", args);
    console.log("===== crated ========");
  },
  beforeMount(el: HTMLElement, dir: DirectiveBinding<Dir>) {
    console.log("===== beforeMount ========");
    console.log("el", el);
    console.log("dir", dir);
    el.style.background = dir.value.background;
  },
  mounted() {
    console.log("===== mounted ========");
  },
  beforeUpdate() {
    console.log("===== beforeUpdate ========");
  },
  updated() {
    console.log("===== update ========");
  },
  beforeUnmount() {
    console.log("===== beforeUnmount ========");
  },
  unmounted() {
    console.log("===== unmounted ========");
  },
};
let flag = ref(true);
const handle = () => {
  flag.value = !flag.value;
};

// 函数简写
let color = ref("");
const vColor: Directive = (el: HTMLElement, dir: DirectiveBinding<Dir>) => {
  console.log(el, dir);

  el.style.background = dir.value.background;
};
</script>

<style>
</style>